<!DOCTYPE html>
<html>

<head>
    <title>CrossRun|谁与我大梦一场</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./js/headfoot.js"></script>
    <script type="text/javascript" src="./js/paging.js"></script>
    <link href="./css/nav.css" rel="stylesheet" type="text/css" />
    <link href="./css/style.css" rel="stylesheet" />
    <link href="./css/paging.css" rel="stylesheet" />
    <!-- <link rel="stylesheet" type="text/css" href="/css/style.css?v=0.0.0"> -->
</head>

<body class="body_container">

    <div id="header">
        <script>   writhHead();   </script>
    </div>

    <div style="display:inline-flex">
        <div class="index_blogs" id="index_blogs"></div>
        <div class="catas">
            <ul id="catas" class="catas"> </ul>
        </div>
    </div>
    <div class="pagger-box pagger" id="box"></div>

    <script>
        var pageSize = 8;
        var pagebox = 0;
        var pageNum = 1;
        var cid="";
        $("#catas").empty()

        $.get("./api/catalog/list", function (result) {
            js = $.parseJSON(result);
            if (js.resCode == "1") {
                for (var i = 0; i < js.Res.length; i++) {
                    $("#catas").append("<li onclick='getBlogListById(0,"+js.Res[i].id+")'>" + js.Res[i].name + "</li>");
                }
            }
        });

        function getBlogListById(pageN,c){
            pagebox=0;
            pageNum=pageN;
            cid = c
            getBlogList(pageN,cid)
        }

        function getBlogList(pageNum,cid) {
            $("#index_blogs").empty()


            var json = {
                "pageNum": pageNum,
                "pageSize": pageSize,
                "cid":cid+""
            };
            $.ajax({
                contentType: 'application/json',
                type: 'POST',
                url: "./api/blog/list",
                dataType: "json",
                data: JSON.stringify(json),
                success: function (message) {
                    if (message.resCode == "1") {
                        for (var i = 0; i < message.Res.Res.length; i++) {
                            var d = $('<div>')
                            // div.attr('id', 'parent');        //给父div设置id
                            d.addClass('index_blog');    //添加css样式
                            var title = $("<a></a>").text(message.Res.Res[i].title).addClass("index_blog_title").attr("href", "./blog?p=" + message.Res.Res[i].id);
                            var modify = $("<p></p>").text(formatDateTime(message.Res.Res[i].modify)).addClass("index_blog_modify");
                            // var content = $("<p></p>").text(message.Res[i].content).addClass("index_blog_pre");
                            title.appendTo(d)
                            modify.appendTo(d)
                            var pre = $('<div>')
                            // content.appendTo(pre)
                            pre.appendTo(d)
                            d.appendTo($("#index_blogs"));            //将父div添加到body中                        
                        }
                        if (pagebox == 0) {
                            $('#box').paging({
                                initPageNo: 1, // 初始页码
                                totalPages: message.Res.totalNum, //总页数
                                totalCount: "", // 条目总数
                                slideSpeed: 600, // 缓动速度。单位毫秒
                                jump: true, //是否支持跳转
                                callback: function (page) { // 回调函数
                                    getBlogList(page,cid)
                                }
                            });
                            pagebox=1;
                        }
                    }
                },
                error: function (message) {
                    console.log(message);
                    alert("获取列表失败" + message);

                }

            });
        }
        getBlogList(1,cid)
    </script>
</body>

</html>